<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Netty 实时通信</title>
</head>
<body>
发送消息：<input type="text" id="msgContent"/>
<input type="button" value="发送消息" onclick="CHAT.chat()"/>
<hr/>
接收消息：
<div id="receiveMsg"></div>

<script type="text/javascript">
    window.CHAT = {
        socket: null,
        init: function () {
            //判断浏览器是否支持websocket
            if (window.WebSocket) {
                //创建websocket 对象
                CHAT.socket = new WebSocket("ws://101.200.79.231:8888/ws");
                CHAT.socket.onopen = function () {
                    console.log("链接建立成功");
                },
                    CHAT.socket.close = function () {
                        console.log("链接关闭");
                    },
                    CHAT.socket.onerror = function () {
                        console.log("发生异常");
                    },
                    CHAT.socket.onmessage = function (e) {
                        console.log("接受消息：" + e.data);
                        var receiveMsg = document.getElementById("receiveMsg");
                        var html = receiveMsg.innerHTML;//获取本对象原🈶️的内容
                        //嵌入新的内容
                        receiveMsg.innerHTML = html + "<br/>" + e.data;
                    }
            } else {
                console.log("您的浏览器不支持websocket协议");
            }
        },
        chat: function () {
            //获取发送消息框中所输入内容
            var msgContent = document.getElementById("msgContent").value;
            //将客户输入的消息进行发送
            CHAT.socket.send(msgContent);
        }
    };
    CHAT.init();
</script>
</body>
</html>
